import React, { useState, useEffect } from 'react'

export default function EffectHook() {
  console.log('执行组件渲染')
  // 定义计数的状态及修改状态的方法
  const [count, setCount] = useState(0)

  const [count2, setCount2] = useState(99)

  // effect hook
  useEffect(() => {
    console.log('执行 effect 回调函数，未传递第二个参数，则每次状态数据修改，该回调函数都会调用')
  })

  // componentDidMount()
  useEffect(() => {
    console.log('执行 effect 回调，第二个参数为空数组，可模拟 componentDidMount()')
  }, [])

  // componentDidUpdate()
  useEffect(() => {
    console.log('执行 effect 回调，第二个参数为非空数组，可模拟 componentDidUpdate()')
  }, [count2])

  useEffect(() => {
    // componentWillUnmount()
    return () => {
      console.log('组件卸载......')
    }
  }, [])

  return (
    <>
      <button onClick={() => {
        setCount(count + 1)
      }}>你点击了{ count }次</button>

      <button onClick={() => {
        setCount2(count2 - 1)
      }}>你点击了{ count2 }次</button>
    </>
  )
}